<template>
   <!-- 订单列表 -->
   <div>
      <!-- 顶部区域 -->
      <div class="header">
         <div class="form">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
               <el-form-item label="预定编号">
                  <el-input v-model="formInline.ordername" size="small" placeholder="订单名称"></el-input>
               </el-form-item>
               <el-form-item label="预定时间">
                  <div class="block">
                     <el-date-picker v-model="formInline.datavalue" align="right" type="date" placeholder="选择日期"
                        :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                     </el-date-picker>
                  </div>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" size="small" @click="selectorder">查询</el-button>
               </el-form-item>
            </el-form>
         </div>


         <div class="group">
            <el-button size="small" type="warning" @click="btnhuizong">订单汇总</el-button>
            <el-button size="small" type="warning">导出</el-button>
         </div>
      </div>
      <!-- 表格区域 -->
      <div class="content">
         <el-table :data="pagetabeldata" border style="width: 100%" header-cell-class-name="table-center"
            cell-class-name="table-center">>
            <el-table-column type="selection" width="55" :selectable="selectable">
            </el-table-column>

            <el-table-column prop="id" label="订单编号">
            </el-table-column>

            <el-table-column prop="ordersName" label="订单名称">
            </el-table-column>

            <el-table-column prop="address" label="地址">
            </el-table-column>

            <el-table-column prop="phone" label="联系电话">
            </el-table-column>

            <el-table-column prop="createTime" label="预定时间">
               <!-- <template slot-scope="scope">
                  {{ dayjs(scope.row.yudingTime).format('YYYY-MM-DD') }}
               </template> -->
            </el-table-column>

            <el-table-column prop="integral" label="订单总价格">
            </el-table-column>

            <el-table-column prop="tradeState" label="汇总状态">
            </el-table-column>
         </el-table>
         <!--分页  -->
         <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
               :current-page.sync="currentPage" :page-size="pagesize" :page-sizes="[8, 12, 16]"
               layout="total, sizes, prev, pager, next, jumper" :total="prolist">
            </el-pagination>
         </div>
      </div>
   </div>
</template>

<script>
import dayjs from 'dayjs'//引用的时间格式代码
import axios from 'axios';
export default {
   data() {
      return {
         formInline: {
            datavalue: "",//日期保存地址
            ordername: ""
         },
         //订单列表数据展示
         tableData: [],
         //添加时间
         pickerOptions: {
            disabledDate(time) {
               return time.getTime() > Date.now();
            },
            shortcuts: [{
               text: '今天',
               onClick(picker) {
                  picker.$emit('pick', new Date());
               }
            }, {
               text: '昨天',
               onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
               }
            }, {
               text: '一周前',
               onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
               }
            }]
         },
         datavalue: "",//日期保存地址
         //分页
         prolist: 0,//商品条数
         pagesize: 8,  //每页数据
         currentPage: 1,//初始页面
         pagetabeldata: [],//展示数据
         tradeState:'',//汇总状态

      }

   },
   created() {
      this.selectprodata();
   }
   ,
   //后续数据库代码
   methods: {
      dayjs,
      //判断是否已汇总，未汇总则可以勾选，已汇总则不可勾选
      selectable(row, index) {
         if (row.tradeState != "已汇总"&&row.tradeState != "正在支付") {
            return true;
         } else {
            return false;
         }
      },
      //分页
      handleSizeChange(size) {
         // console.log(`每页 ${size} 条`);
         this.pagesize = size;
         // console.log(this.pagesize, "每页多少数据");
         this.getpageinfo()
      },
      handleCurrentChange(currentPage) {
         // console.log(`当前页: ${currentPage}`);
         this.currentPage = currentPage
         // console.log(this.currentPage, "第几页");
         this.getpageinfo()
      },
      //获取订单列表-----------------
      selectprodata() {
         console.log();
         axios
            .get('https://lvyou.free.svipss.top/orders/getlist')
            .then((res) => {
               this.tableData = res.data.data;
               console.log(this.tableData)
               //获取商品有多少条数据
               this.prolist = res.data.data.length;
               for(var i=0;i<this.prolist;i++){
                  if(this.tableData[i].tradeState==1){
                     this.tableData[i].tradeState="购物车"
                  }else if(this.tableData[i].tradeState==2){
                     this.tableData[i].tradeState="正在支付"
                  }else if(this.tableData[i].tradeState==3){
                     this.tableData[i].tradeState="完成订单"
                  }else(
                     this.tableData[i].tradeState="已汇总"
                  )
               }
               this.getpageinfo()
               //console.log(this.prolist)
            },
               // 失败回调
               error => {
                  console.log('请求失败！')
                  // 请求失败原因
                  console.log(error.message)
               }
            )

      },
      //获取当前页面信息
      getpageinfo() {
         this.pagetabeldata = [];
         for (let i = (this.currentPage - 1) * this.pagesize; i < this.prolist; i++) {
            //把遍历的数据添加到pagetabeldata里
            this.pagetabeldata.push(this.tableData[i]);
            //console.log(this.pagetabeldata)
            //判断是否到达一页的要求
            if (this.pagetabeldata.length === this.pagesize) {
               break;
            }
         }
      },
      // 查询订单
      selectorder() {
         //console.log(this.formInline.ordername);
         //console.log(this.formInline.datavalue);

         axios
            .get('https://lvyou.free.svipss.top/orders/getlist?orderName=' + this.formInline.ordername + '')
            .then((res) => {
               console.log(res.data.data);
               // let createtime=res.data.data.createTime
               // let sb=createtime.split("-").splice(0.3).join("-")
               // console.log(createtime,sb);
               // if (sb==this.formInline.datavalue) {
               if (res.data.data.length > 0) {
                  this.pagetabeldata = [];
                  this.pagetabeldata = res.data.data
               } else {
                  alert("没有这个订单")
               }

               // }else{
               //    alert("没有这个订单")
               // }
            },
               // 失败回调
               error => {
                  console.log('请求失败！')

                  // 请求失败原因
                  console.log(error.message)
               }
            )
      },
      //订单汇总
      btnhuizong(){

      }

   }


}
</script>

<style lang="less" scoped>
.header {
   background-color: #d4e0f0;
   margin-bottom: 20px;
   padding: 10px;
   border-radius: 10px;

   .el-form-item {
      margin-bottom: 16px;
   }

   .group {
      border: 1px solid #fff;
      padding: 8px;
   }
}

.el-pagination {
   white-space: nowrap;
   padding: 2px 5px;
   color: #303133;
   font-weight: 700;
   background-color: white;
}

.content {
   background: #c2dde0;

   .el-input {
      width: 70%;
   }

   /deep/ .active-header {
      color: black;
      text-align: center;
   }

   /deep/ .table-center {
      text-align: center;
   }

}
</style>